<template>
	<view class="login-container">
		<image src="../../static/QHlogo.png" widthFix style="width: 210px; height: 80px" class="logoImage"></image>
		<!-- <view class="login-title">请登陆</view> -->
		<view class="login-item">
			<u--input
				v-model="userInfo.IP"
				placeholder="请输入IP地址"
				prefixIcon="IP"
				shape="circle"
				border="bottom"
				prefixIconStyle="font-size: 16px;color: #909399;margin-left:8px"
				@change="IPChange"
			></u--input>
		</view>
		<view class="login-item">
			<uni-icons type="plus" size="18" @click="userInfo.userName = ''" v-show="userInfo.userName"></uni-icons>
			<u--input
				v-model="userInfo.userName"
				placeholder="请输入帐号"
				prefixIcon="account"
				shape="circle"
				border="bottom"
				prefixIconStyle="font-size: 22px;color: #909399"
				@change="userNameChange"
			></u--input>
		</view>
		<view class="login-item">
			<uni-icons :type="eye" size="18" @click="changePasswordOff" v-show="userInfo.password"></uni-icons>
			<u--input
				v-show="passwordOff == 'password'"
				v-model="userInfo.password"
				type="password"
				placeholder="请输入密码"
				prefixIcon="lock"
				shape="circle"
				border="bottom"
				prefixIconStyle="font-size: 22px;color: #909399"
			></u--input>
			<u--input
				v-show="passwordOff == 'plus'"
				v-model="userInfo.password"
				type="plus"
				placeholder="请输入密码"
				prefixIcon="lock"
				shape="circle"
				border="bottom"
				prefixIconStyle="font-size: 22px;color: #909399"
			></u--input>
		</view>
		<view class="login-item login-code">
			<u--input
				v-model="userInfo.verificationCode"
				placeholder="请输入验证码"
				prefixIcon="scan"
				shape="circle"
				border="bottom"
				prefixIconStyle="font-size: 22px;color: #909399"
			></u--input>
			<image class="img" @click="getVierificationCode" :src="codeSrc"></image>
		</view>
		<view class="login-btn">
			<u-button
				@click="login"
				:loading="loading"
				:loadingText="loading ? '登录中..' : ''"
				:customStyle="{ 'border-radius': '10rpx' }"
				size="large"
				type="primary"
				text="登录"
			></u-button>
		</view>
	<!-- 	<view class="popup" v-show="popupShow">
			<view class="popup-content">
				<view class="popup-content-titel">
					提示
				</view>
				<view class="popup-content-text">
					该版本已停止使用，请联系管理员获取最新版本
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import store from '../../store/index.js';
export default {
	data() {
		return {
			// popupShow: false,
			IPTime: null,
			userNameTime: null,
			passwordOff: 'password',
			eye: 'eye-slash',
			loading: false,
			codeSrc: '',
			userInfo: {
				IP: '',
				userName: '',
				password: '',
				UUID: '',
				verificationCode: ''
			},
			icons: []
		};
	},
	methods: {
		// getLoginInofo() {
		// 	// console.log('信息---getSystemInfoSync', uni.getSystemInfoSync());
		// 	const appVersion = uni.getSystemInfoSync().appVersion;
		// 	const url = 'api/Appversion/version?version=' + appVersion;
		// 	// console.log('appVersion----', appVersion);
		// 	this.http.post(url).then((x) => {
		// 		// console.log('登录版本权限', x);
		// 		this.popupShow = !x
		// 	});
		// },
		IPChange(e) {
			clearTimeout(this.IPTime);
			this.IPTime = setTimeout(() => {
				store.commit('setIP', this.userInfo.IP.trim());
				this.getVierificationCode();
			}, 5000);
		},
		userNameChange(e) {
			clearTimeout(this.userNameTime);
			this.userNameTime = setTimeout(() => {
				store.commit('setUserName', e.trim());
				this.getVierificationCode();
			}, 5000);
		},
		changePasswordOff() {
			if (this.passwordOff == 'plus') {
				this.passwordOff = 'password';
				this.eye = 'eye-slash';
			} else if (this.passwordOff == 'password') {
				this.passwordOff = 'plus';
				this.eye = 'eye';
			}
		},
		login() {
			if (this.base.isEmpty(this.http.ipAddress) && this.base.isEmpty(this.userInfo.IP)) return this.$toast('请输入IP地址');
			if (this.base.isEmpty(this.userInfo.userName)) return this.$toast('请输入用户名');
			if (this.base.isEmpty(this.userInfo.password)) return this.$toast('请输入密码');
			this.http.ipAddress = this.userInfo.IP.trim();
			if (this.base.isEmpty(this.userInfo.verificationCode)) {
				this.getVierificationCode();
				return this.$toast('请输入验证码');
			}
			this.userInfo.userName = this.userInfo.userName.trim();
			this.userInfo.password = this.userInfo.password.trim();
			this.userInfo.verificationCode = this.userInfo.verificationCode.trim();
			this.loading = true;
			//用户名存到本地
			uni.setStorage({
				key: 'userName',
				data: this.userInfo.userName,
				success() {
					console.log('userName存储本地success');
				}
			});
			console.log(this.http);
			this.http
				.post('api/user/login', this.userInfo, '正在登录....')
				.then((result) => {
					if (!result.status) {
						this.loading = false;
						this.getVierificationCode();
						return this.$toast(result.message);
					}
					this.$toast('登录成功,正在跳转!');
					this.$store.commit('setUserInfo', result.data);
					uni.switchTab({
						url: '/pages/flow/flow'
					});
				})
				.catch(() => {
					console.log('catch');
				});
		},
		getVierificationCode() {
			this.http.get('api/User/getVierificationCode').then((x) => {
				this.codeSrc = 'data:image/png;base64,' + x.img;
				this.userInfo.UUID = x.uuid;
			});
		},
		wechatLogin() {}
	},
	onShow(){
		// this.getLoginInofo()
	},
	onLoad() {
		// this.getLoginInofo()
		if (store.state.IP) {
			this.userInfo.IP = store.state.IP;
		}
		// console.log("uni.getStorageInfoSync()",uni.getStorageInfoSync());
		if (uni.getStorageInfoSync().keys.includes('IP')) {
			console.log('IP');
			uni.getStorage({
				key: 'IP',
				success: (res) => {
					this.userInfo.IP = res.data;
					store.commit('setIP', res.data);
				}
			});
		}
		if (uni.getStorageInfoSync().keys.includes('userName')) {
			uni.getStorage({
				key: 'userName',
				success: (res) => {
					this.userInfo.userName = res.data;
					store.commit('setUserName', res.data);
				}
			});
		}

		this.getVierificationCode();
		// #ifdef MP-WEIXIN
		this.icons = ['https://img.yzcdn.cn/vant/share-icon-wechat.png'];
		return;
		// #endif
		this.icons = ['https://img.yzcdn.cn/vant/share-icon-qq.png', 'https://img.yzcdn.cn/vant/share-icon-wechat.png', 'https://img.yzcdn.cn/vant/share-icon-weibo.png'];
	}
};
</script>
<style lang="less" scoped>
	// .popup{
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// 	width: 100vw;
	// 	height: 100vh;
	// 	z-index: 9999;
	// 	background-color: rgba(0,0,0,.3);
	// 	.popup-content{
	// 		position: absolute;
	// 		width: 400rpx;
	// 		height: 400rpx;
	// 		top: 50%;
	// 		left: 50%;
	// 		padding: 20rpx;
	// 		transform: translate(-50%,-50%);
	// 		border-radius: 10rpx;
	// 		background-color: #fff;		z-index: 99999;
	// 		.popup-content-titel{
	// 			font-size: 20px;
	// 			line-height: 40px;
	// 			text-align: center;
	// 		}
	// 	}
	// }
.login-container {
	height: 80vh;
	padding: 160rpx 60rpx 0 60rpx;
	.logoImage {
		display: block;
		margin: 0 auto 40rpx auto;
	}
	.login-title {
		padding-left: 20rpx;
		font-size: 38rpx;
		margin-bottom: 40rpx;
	}

	.login-item {
		position: relative;
		padding: 12rpx 0;
		border-bottom: 1px solid #eee;
		margin-bottom: 20rpx;

		/deep/ .u-icon {
			width: 80rpx;
		}
		/deep/ .uni-icons.uniui-plus,
		/deep/ .uni-icons.uniui-eye,
		/deep/ .uni-icons.uniui-eye-slash {
			position: absolute;
			right: 20rpx;
			top: 30rpx;
			z-index: 99999;
		}
		/deep/ .uni-icons.uniui-plus {
			transform: rotate(45deg);
		}
	}

	.login-code {
		border-bottom: none;
		display: flex;

		.img {
			width: 120rpx;
			height: 54rpx;
		}
	}

	.login-btn {
		margin: 50rpx 0 50rpx 0;
	}
}
</style>
